<template>
  <view class="">

    <!-- 商家信息 -->
    <view class="width100 d-clo d-jc-centen d-ai-centen">
      <view class="margin-top-30">
        <image class="s-head-img" :src="form.headImg"></image>
      </view>
      <view class="font-bold font38 gray1 margin-top-30">{{ form.name }}</view>
      <view class="gray4 margin-top-30">公告:店铺上新，优惠多多！！！！</view>
    </view>

    <!--    <view style="position: relative;bottom: 200rpx;left: 660rpx;" @tap="collectionClick">-->
    <!--      <u-icon v-if="!collection" name="heart" size="36" color="#2979ff"></u-icon>-->
    <!--      <u-icon v-else name="heart-fill" size="36" color="#2979ff"></u-icon>-->
    <!--    </view>-->

    <!-- 选项 -->
    <view class="content width100">
      <view class="width60 d-row d-ai-centen d-jc-between">
        <view :class="{active: activeTabIndex == index}"
              v-for="(item,index) in activeList" :key="index" @tap="handleTab(index)">
          <view class="title-name font32">{{ item.title }}</view>
          <view :class="{titleBottom: activeTabIndex == index}"></view>
        </view>
      </view>
    </view>

    <view style="margin-top: 20rpx;border-bottom: 1rpx solid #e2e2e2;"></view>

    <!-- 商品 -->
    <view v-if="activeTabIndex==0" class="shop">
      <view class="d-row">
        <!-- 商品导航 -->

        <view class="shop-bar">
          <scroll-view scroll-y="true" style="height: 900rpx;">
            <view class="shop-bar-title " :class="{activecolor:shopBarTitleIndex == index}"
                  v-for="(item,index) in shopBarTitleList" :key="index" @tap="shopBarTitleClick(index)">
              {{ item.title }}
            </view>
          </scroll-view>
        </view>


        <!-- 商品列表 -->
        <view class="width100 shop-list">
          <scroll-view scroll-y="true" style="height: 1000rpx;">
            <view class="font-bold" style="margin-top: 20rpx; margin-left: 20rpx;">{{ shopDetailListTile }}</view>

            <view class="width90 d-row d-ai-centen" style="margin: 10rpx auto;height: 180rpx;"
                  v-for="(good,index) in shopDetailList" :key=index>
              <view>
                <image class="shop-list-img" :src=good.image></image>
              </view>
              <view class="width100 d-row margin-20">
                <view class="width100 d-clo">
                  <view class="font-bold font30">{{ good.name }}</view>
                  <view class="font22 gray3">{{ good.description }}</view>
                  <view class="width100 d-row d-jc-between d-ai-centen">
                    <view class="color-red">¥ {{ good.price }}</view>
                    <view class="d-row">
                      <view v-show="goodCartNum(good.dishId)" @tap="reducShopClick(good,1)"
                            class="reduc iconfont iconsami-select"></view>
                      <view v-show="goodCartNum(good.dishId)" @tap="reducShopClick(good,1)" class="reduc">
                        - </u-icon> </view>
                      <view v-show="goodCartNum(good.dishId)" class="number">{{ goodCartNum(good.dishId) }}</view>
                      <view @tap="addShopClick(good,1)" class="add"> +</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view style="height: 100rpx;"></view>
          </scroll-view>
        </view>

      </view>

      <view class="shop-car">
        <view style="margin:0 auto;" class="width90 d-row d-jc-between d-ai-centen">
          <view class="d-row d-jc-start d-ai-centen" style="height: 120rpx;padding-left: 10rpx;"
                @tap="showShopCarModelClick">
            <view>
              <image class="shop-car-img"
                     :src="getCartGoodsPrice > 0 ? '/static/cars-blue.png':'/static/cars.png'"></image>
            </view>
            <view class="d-clo d-jc-around" style="height: 100rpx;margin-left: 10rpx;">
              <view class="gray4 font36" :class="{colorWhite:getCartGoodsPrice > 0}">
                {{ getCartGoodsPrice > 0 ? '￥' + getCartGoodsPrice : shopCarTip }}
              </view>

            </view>
          </view>
          <view class="go gray4">
            <button class="go gray4 font28" :class="{colorWhiteBgBlue: !disabledPay}" @tap="goPay"
                    :disabled="disabledPay">
              {{ getCartGoodsPrice > 0 ?  goTitle :  '去结算'}}
            </button>
          </view>

        </view>
      </view>


      <!-- 购物车模态框 start -->
      <u-popup v-model="showShopCarModel" mode="bottom" length="80%">
        <view class="d-clo d-ai-centen">
          <view class="width90 d-row d-jc-between font32" style="height: 100rpx;line-height: 100rpx;">
            <view>已选商品</view>
            <view @tap="emptyClick">
              <u-icon name="trash"></u-icon>
              清空
            </view>
          </view>

          <view class="width90 d-row d-jc-between d-ai-centen border-bottom-1 padding-10"
                v-for="(good,index) in cart" :key="index">
            <view class="d-clo d-row d-ai-centen">
              <image class="shop-list-img" :src=good.image></image>
              <label class="font34 font-bold">{{ good.name }}</label>
            </view>
            <view class="d-row">
              <view class="color-red">¥ {{ good.price }}</view>
              <view class="d-row padding-left-20">
                <view v-show="goodCartNum(good.id)" @tap="reducShopClick(good,1)" class="reduc">-</view>
                <view v-show="goodCartNum(good.id)" class="number">{{ goodCartNum(good.id) }}</view>
                <view @tap="addShopClick(good,1)" class="add">+</view>
              </view>
            </view>
          </view>
        </view>
      </u-popup>
      <!-- 购物车模态框 end -->

      <!-- 清空购物车提示框 start -->
      <u-modal v-model="showCartEntry" content="清空购物车" width="85%" :content-slot="true"
               :mask-close-able="true"
               :show-title="false"
               :show-confirm-button="false"
               :show-cancel-button="false"
               :title-style="titleStyle"
               :confirm-style="confirmStyle"
               :cancel-style="cancelStyle"
               @confirm="cartEntry">

        <view class="d-clo height300 padding-40 d-jc-between bg-color-f7">
          <view class="font-bold font36">提示</view>
          <view class="font-bold margin-top-20 margin-bottom-30">清空购物车</view>
          <view class="width100 d-row d-jc-between margin-center padding-bottom-10" style="color: #2a9e85;">
            <view @tap="cartEntry" class="click-show">确定</view>
            <view @tap="noCartEntry" class="click-show">取消</view>
          </view>
        </view>


      </u-modal>
      <!-- 清空购物车提示框 end -->

    </view>

    <!-- 商家详情 -->
    <view v-if="activeTabIndex==1" class="content">
      <!--			<view class="width90 d-clo d-jc-around" style="height: 360rpx;">-->
      <!--				<view>商家信息</view>-->
      <!--				<view><image style="width: 200rpx;height: 200rpx;" :src=form.headImg></image></view>-->
      <!--				<view>{{form.name}}</view>-->
      <!--			</view>-->

      <view class="width100" style="background-color: #F7F7F7;height: 20rpx;"></view>

      <view class="width90 d-row d-jc-between pram">
        <view class="font-bold font34">商家名称</view>
        <view class="gray2 font30">{{ form.name }}</view>
      </view>
      <!--			<view class="width90 d-row d-jc-between pram" >-->
      <!--				<view class="font-bold font34">商家品类</view>-->
      <!--				<view class="gray2 font30">{{form.type}}</view>-->
      <!--			</view>-->
      <view class="width90 d-row d-jc-between pram">
        <view class="font-bold font34">商家地址</view>
        <view class="gray2 font30">{{ form.address }}</view>
      </view>
      <view class="width90 d-row d-jc-between pram">
        <view class="font-bold font34">商家电话</view>
        <view class="gray2 font30">
          <u-icon name="phone-fill" class="phone-tag"></u-icon>
          {{ form.phone }}
        </view>
      </view>
      <view class="width90 d-row d-jc-between pram" style="border-bottom: 0;">
        <view class="font-bold font34">营业时间</view>
        <view class="gray2 font30">{{ form.time }}</view>
      </view>

      <view @tap="toReportClick" class="width100 d-clo d-jc-centen d-ai-centen"
            style="background-color: #F7F7F7;height: 150rpx;">
        <view class="width90 button-bottom font-bold font34">举报商家</view>
      </view>
    </view>

    <!-- 提示框 -->
    <u-toast ref="uToast"/>

    <!--    &lt;!&ndash; 在购物车模态框循环中 &ndash;&gt;-->
    <!--    <view class="width90 d-row d-jc-between d-ai-centen border-bottom-1 padding-10" v-for="(good,index) in cart" :key="index">-->
    <!--      <view>-->
    <!--        +    <label class="font34 font-bold">{{ good.name }}</label>-->
    <!--        +    <p class="font26 gray3">{{ good.description || '无描述' }}</p>-->
    <!--      </view>-->
    <!--      <view class="d-row">-->
    <!--        <view class="color-red">¥ {{ good.price }}</view>-->
    <!--        <view class="d-row padding-left-20">-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->

  </view>
</template>

<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

export default {
  data() {
    return {
      titleStyle: {
        float: 'left'
      },
      cancelStyle: {
        float: 'right'
      },
      confirmStyle: {
        float: 'left',
        width: '200rpx'
      },
      collection: false,
      addShopTF: true,
      number: 0,
      form: {
        id: '',
        name: '',
        headImg: '',
        phone: '',
        time: '10:00~22:00',
        address: '',
      },
      activeList: [
        {title: '点餐', value: 'd'},
        {title: '商家', value: 's'},
      ],
      shopBarTitleList: [],
      activeTabIndex: '',
      shopBarTitleIndex: '',
      showShopCarModel: false,
      showCartEntry: false,
      shopDetailListTile: '',
      shopDetailList: [],
      shopCarTip: '未选购商品',
      cart: [],
    }
  },
  onLoad(option) {
    this.activeTabIndex = 0;
    this.shopBarTitleIndex = 0;

    console.log(JSON.stringify(option) + "详情页面接收--" + option.id); //打印出上个页面传递的参数。
    this.form.id = option.id;
    this.form.name = option.name;
    this.form.headImg = option.headImg;
    this.form.phone = option.phone;
    this.form.address = option.address;
    // 初始加载分类数据
    this.getShopBarTitleList().then(() => {
      // 分类数据加载成功后，自动调用 shopBarTitleClick 方法
      if (this.shopBarTitleList.length > 0) {
        const defaultCategoryIndex = 0; // 默认选择第一个分类
        this.shopBarTitleIndex = defaultCategoryIndex;
        this.shopBarTitleClick(defaultCategoryIndex);
      }
    });
    // 初始化购物车数据
    this.getCartData();
  },
  onNavigationBarSearchInputClicked() {
    uni.navigateTo({
      url: '../index/search',
      animationType: 'pop-in',
      animationDuration: 2000
    })
  },
  watch: {
    // watch 监听器,监听到数据发生变化时执行
    activeTabIndex: async function (val) {
      const type = this.activeList[val].value
      await this.getForm(type)
    },
    shopBarTitleIndex: async function (val) {
      this.shopDetailListTile = this.shopBarTitleList[val].title
      const type = this.shopBarTitleList[val].value
      await this.getShopBarTitleList(type)
    }
  },
  computed: {
    ...mapState(['orderType', 'address', 'store']),
    goTitle() {
      if (!this.disabledPay) return "去结算"
      return "¥" + this.form.minPrice + "起送"
    },
    goodCartNum() {	//计算单个商品添加到购物车的数量
      return (id) => this.cart.reduce((acc, cur) => {
        if (cur.id === id) {
          return acc += cur.number
        }
        return acc
      }, 0)
    },
    getCartGoodsNumber() { //计算购物车总数
      return this.cart.reduce((acc, cur) => acc + cur.number, 0)
    },
    getCartGoodsPrice() {
      return this.cart.reduce((acc, cur) => {
        const price = cur.price || 0; // 如果 price 不存在，默认为 0
        const number = cur.number || 0; // 如果 number 不存在，默认为 0
        return acc + (price * number);
      }, 0); // 初始值为 0
    },

    disabledPay() {
      return this.getCartGoodsPrice <= 0 || this.getCartGoodsPrice < this.form.minPrice
    },
    spread() { //差多少元起送
      return parseFloat((this.form.minPrice - this.getCartGoodsPrice).toFixed(2))
    }
  }
  ,
  methods: {
    handleTab(index) {
      this.activeTabIndex = index
    }
    ,
    /*菜品分类点击事件*/
    shopBarTitleClick(index) {
      this.shopBarTitleIndex = index;
      this.shopDetailListTile = this.shopBarTitleList[index].title;

      // 获取当前选中的分类ID
      const categoryId = this.shopBarTitleList[index].value;

      // 调用获取商品列表的方法
      this.getShopDetailList(categoryId);
    }
    ,
    async getForm(type) {
      console.log("获取" + type + "表单")
    }
    ,
    /*根据菜品分类ID获取菜品列表*/
    async getShopDetailList(categoryId) {
      try {
        const res = await uni.request({
          url: 'http://127.0.0.1:8080/dish/user/dish/list',
          method: 'GET',
          data: {
            merchantId: this.form.id,
            categoryId: categoryId
          }
        });

        console.log('完整响应:', res);

        const responseData = res[1].data;

        if (responseData && Array.isArray(responseData.data)) {
          this.shopDetailList = responseData.data.map(item => ({
            dishId: item.id,
            name: item.name,
            image: item.image,
            description: item.description,
            price: item.price,
            status: item.status,
            categoryId: item.categoryId,
            setmealId: item.setmealId,
            updateTime: item.updateTime,
            flavors: item.flavors
          }));
        } else {
          uni.showToast({title: '商品数据格式错误', icon: 'none'});
        }
      } catch (err) {
        console.error("商品加载异常:", err);
        uni.showToast({title: '网络请求失败', icon: 'none'});
      }
    }
    ,
    /*获取菜品分类列表*/
    async getShopBarTitleList(type) {
      try {
        const res = await uni.request({
          url: 'http://localhost:8080/dish/user/category/list',
          method: 'GET',
          data: {
            merchantId: this.form.id // 传递商家ID参数
          }
        });

        console.log('完整响应:', res);
        console.log("分类加载成功:", res[1].data);

        const responseData = res[1].data;

        if (responseData && Array.isArray(responseData.data)) {
          this.shopBarTitleList = responseData.data.map(item => ({
            title: item.name,
            value: item.id
          }));
        } else {
          uni.showToast({title: '分类数据格式错误', icon: 'none'});
        }
      } catch (err) {
        console.error("分类加载异常:", err);
        uni.showToast({title: '网络请求失败', icon: 'none'});
      }
    }
    ,
    /*获取购物车数据*/
    async getCartData() {
      try {
        // 从localStorage获取用户ID
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        const userId = userInfo?.data?.id;
        if (!userId) return;

        // 发送请求获取购物车数据
        const res = await uni.request({
          url: `http://localhost:8080/user/user/cart/list/${userId}`,
          method: 'GET'
        });

        console.log('购物车完整响应:', res[1].data.data);
        // 处理响应数据
        this.cart = res[1].data.data.map(item => ({
          id: item.id,
          name: item.name,
          price: item.amount,
          number: item.number, // 根据实际数据结构调整
          image: item.image,
          dishId: item.dishId,

        }));
        console.log("购物车数据:", this.cart);

      } catch (err) {
        console.error("获取购物车数据失败:", err);
        uni.showToast({title: '获取购物车失败', icon: 'none'});
      }
    }
    ,

    toReportClick() {
      this.$refs.uToast.show({
        title: '举报成功',
        type: 'success',
        position: 'center',
        duration: '500'
      })
    }
    ,
    /*添加购物车*/
    async addShopClick(good, num) {
      try {
        // 获取用户ID
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        const userId = userInfo?.data?.id;
        if (!userId) {
          uni.showToast({title: '用户ID获取失败', icon: 'none'});
          return;
        }

        // 构造请求参数
        const payload = {
          dishId: good.dishId || null,
          setmealId: good.setmealId || null,
          dishFlavor: good.dishFlavor || '', // 根据实际数据调整
          userId: userId,
        };

        // 发送添加购物车请求
        const res = await uni.request({
          url: 'http://localhost:8080/user/user/cart/add',
          method: 'POST',
          data: payload
        });

        // 处理响应
        if (res[1].data.code === 0) {

          uni.showToast({title: '添加成功', icon: 'success'});
          this.getCartData();
        } else {
          uni.showToast({title: '添加失败', icon: 'none'});
        }
      } catch (err) {
        console.error('添加商品失败:', err);
        uni.showToast({title: '网络请求失败', icon: 'none'});
      }
    }
    ,
    /* 减少商品 */
    reducShopClick(good) {
      // 获取用户ID
      const userInfo = JSON.parse(localStorage.getItem('userInfo'));
      const userId = userInfo?.data?.id;
      if (!userId) {
        uni.showToast({title: '用户ID获取失败', icon: 'none'});
        return;
      }

      // 构造请求参数
      const payload = {
        dishId: good.dishId || null,
        setmealId: good.setmealId || null,
        dishFlavor: good.dishFlavor || '',
        userId: userId,
      };

      // 发送请求
      uni.showLoading({title: '加载中...'});
      uni.request({
        url: 'http://localhost:8080/user/user/cart/sub',
        method: 'PUT',
        data: payload,
        success: (res) => {
          uni.hideLoading();
          if (res.data.code === 0) {
            this.updateCartAfterReduce(good);
            uni.showToast({title: '减少成功', icon: 'success'});
          } else {
            uni.showToast({title: '减少失败', icon: 'none'});
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({title: '网络请求失败', icon: 'none'});
        }
      });
    }
    ,

// 新增本地数据更新方法
    updateCartAfterReduce(good) {
      const index = this.cart.findIndex(item => item.id === good.id);
      if (index === -1) return;

      this.cart[index].number -= 1;
      if (this.cart[index].number <= 0) {
        this.cart.splice(index, 1);
      }
      // 可选：重新拉取购物车数据确保一致性
      this.getCartData();
    }
    ,

    /* 去结算 */
    async goPay() {
      // 新增：先获取最新购物车数据
      await this.getCartData();

      if (this.disabledPay) return; // 新增：未满足条件时直接返回

      uni.showLoading({title: '加载中'});
      // 获取用户ID
      const userInfo = JSON.parse(localStorage.getItem('userInfo'));
      const userId = userInfo?.data?.id;
      const amount = this.getCartGoodsPrice;
      const merchantId = this.form.id;

      try {
        const res = await uni.request({
          url: 'http://localhost:8080/order/user/order/submit',
          method: 'POST',
          data: {userId, amount, merchantId}, // 传递用户ID参数
        });

        if (res[1].data.code === 0) {
          const orderNumber = res[1].data.data.orderNumber;
          console.log('Order Number:', orderNumber);

          // 使用编程式导航跳转到支付页面并携带 orderNumber 参数
          this.$router.push({
            path: '/pages/store/pay',
            query: {
              orderNumber: orderNumber,
            },
          });

          this.getCartData();
          uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)));
        } else {
          uni.showToast({title: '提交订单失败', icon: 'none'});
        }
      } catch (err) {
        console.error('提交订单失败:', err);
        uni.showToast({title: '网络请求失败', icon: 'none'});
      } finally {
        uni.hideLoading();
      }
    }

    ,
    showShopCarModelClick() {
      this.showShopCarModel = !this.showShopCarModel && this.getCartGoodsNumber > 0
    }
    ,
    emptyClick() {
      //显示清空购物车提示
      this.showCartEntry = true;
    }
    ,
    /* 清空购物车 */
    async cartEntry() {
      try {
        // 获取用户ID
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        const userId = userInfo?.data?.id;
        if (!userId) {
          uni.showToast({title: '用户ID获取失败', icon: 'none'});
          return;
        }

        // 发送清空购物车请求
        const res = await uni.request({
          url: `http://localhost:8080/user/user/cart/clean/${userId}`,
          method: 'DELETE'
        });

        // 处理响应
        if (res[1].statusCode === 200) {
          // 清空本地数据
          this.cart = [];
          this.showCartEntry = false;
          this.showShopCarModel = false;
          uni.showToast({title: '清空成功', icon: 'success'});
        } else {
          uni.showToast({title: '清空失败', icon: 'none'});
        }
      } catch (err) {
        console.error('清空购物车失败:', err);
        uni.showToast({title: '网络请求失败', icon: 'none'});
      }
    }
    ,

    noCartEntry() {
      this.showCartEntry = false;
    }
  }
}
</script>

<style>
.s-head-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.title-name {
  padding: 15rpx 0;
}

.active {
  font-weight: bold;
}

.titleBottom {
  margin: 0 auto;
  width: 100%;
  border-bottom: 5rpx solid #007AFF;
}

.pram {
  border-bottom: 1rpx solid #f5f5f5;
  height: 90rpx;
  line-height: 90rpx;
}

.phone-tag {
  color: #007AFF;
  border: 1rpx solid #007AFF;
  border-radius: 50%;
  padding: 3rpx;
}

.button-bottom {
  height: 80rpx;
  background-color: #FFFFFF;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
}

.shop {

}

.shop-bar {
  background-color: #f7f7f7;
  flex: 1;
  height: 800rpx;
}

.shop-bar-title {
  padding-top: 20rpx;
  height: 90rpx;
  line-height: 70rpx;
  text-align: center;
}

.activecolor {
  background-color: #FFFFFF;
}

.shop-list {
  flex: 3;
  margin-top: 20rpx;

}

.shop-list-img {
  width: 150rpx;
  height: 150rpx;
}

.shop-car {
  background-color: #4f535a;
  width: 90%;
  height: 120rpx;
  margin: 0 auto;
  border-radius: 60rpx;

  position: fixed;
  bottom: 30rpx;
  left: 5%;
  z-index: 1000;
}

.shop-car-img {
  width: 80rpx;
  height: 130rpx;

  position: relative;
  top: -10rpx;
}

.reduc {
  color: #007AFF;
  background-color: #FFFFFF;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 40rpx;
  border: 1rpx solid #007AFF;
}

.number {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
}

.add {
  color: #FFFFFF;
  background-color: #007AFF;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 40rpx;
}

.go {
  width: 200rpx;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #676c73 !important;
  color: #cecece !important;
  text-align: center;
  border-radius: 90rpx;
}

.colorWhiteBgBlue {
  background-color: #007AFF !important;
  color: #FFFFFF !important;
}

.click-show {
  width: 100rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
}

.click-show:hover {
  /*鼠标悬浮效果*/
  /*阴影*/
  /* box-shadow: 5px 5px 5px grey; */
  /*发光*/
  background-color: #c6c6c6;

}

.d-row {
  display: flex;
  flex-direction: row;
}

.d-ai-centen {
  align-items: center;
}

</style>
